<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时</title>
    <style>
        .container {
            width: 50%;
            height: 120px;
            line-height: 60px;
            text-align: center;
            margin: 50px auto;
            border: solid 1px #cccccc;
            border-radius: 15px;
            box-shadow: 0 0 5px 3px #cccccc;
            position: relative;
        }
        
        .container button {
            width: 80px;
            height: 30px;
            border: 0;
            outline: none;
            background-color: red;
            position: absolute;
            bottom: 20px;
            left: 200px;
        }
    </style>
</head>

<body>
    <div class="container">
        <span class="timeBox"></span>
        <button type="button">删除时间</button>
    </div>
    <script>
        var timeBox = document.querySelector('.timeBox'),
            del_btn = document.querySelector('button');


        function timeWrite() {
            var timeItem = new Date(),
                weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
                timeStr = '';

            var Year = timeItem.getFullYear(),
                Month = timeItem.getMonth() + 1,
                Day = timeItem.getDate(),
                week = timeItem.getDay(),
                Hour = timeItem.getHours(),
                Minute = timeItem.getMinutes(),
                Second = timeItem.getSeconds(),
                Misecond = timeItem.getMilliseconds();



            if (Misecond < 10) {
                Misecond = '00' + Misecond;
            } else if (Misecond < 100) {
                Misecond = '0' + Misecond;
            }


            Month = Month < 10 ? '0' + Month : Month;
            Day = Day > 10 ? Day : '0' + Day;
            Hour = Hour > 10 ? Hour : '0' + Hour;
            Minute = Minute > 10 ? Minute : '0' + Minute;
            Second = Second > 10 ? Second : '0' + Second;

            timeStr = `${Year}年${Month}月${Day}日 ${weekArr[week]}  ${Hour}:${Minute}:${Second}:${Misecond}`;
            timeBox.innerHTML = timeStr;
        }

        var timePointer = setInterval(timeWrite, 1);





        del_btn.onclick = function() {
            clearInterval(timePointer);
            timeBox.innerHTML = '';
        }
    </script>
</body>

</html>